<template>
  <div class="btns">
  <el-button plain @click = 'appendData'>新增商品</el-button>
  <el-button plain>批量选择</el-button>
  <el-button plain>批量上架</el-button>
  <el-button plain>批量下架</el-button>

  <div v-show="vvm" class="hide">
     <div class="head">商品新增</div>
     <div class="bottom">
    商品序列号：<el-input v-model="input1" placeholder="请输入" />
    商品名称：<el-input v-model="input2" placeholder="请输入" /> 
    运费：<el-input v-model="input3" placeholder="请输入" />  
    供应商：<el-input v-model="input4" placeholder="请输入" />
    <el-button plain @click = 'clear'>取消</el-button>
    <el-button plain @click = 'addData'>确认</el-button>
     </div>
  </div>
  </div>
</template>
<script>
import {ref} from 'vue';
import mitt from '@/mock1/mitt.js'
export default {
  setup() {
    const input1 = ref('');
    const input2 = ref('');
    const input3 = ref('');
    const input4 = ref('');

    const vvm = ref(false)

    const appendData = ()=>{
      vvm.value = true
    }
 const clear =()=>{
    input1.value = ''
    input2.value = ''
    input3.value = ''
    input4.value = ''
    vvm.value = false
 }
 const addData=()=>{
mitt.emit('mss',{a:input1.value,b:input2.value,c:input3.value,d:input4.value})
    vvm.value = false

 }

    return {appendData,vvm,input1,input2,input3,input4,clear,addData}
  },
}
</script>

<style lang="less" scoped>
.btns{
  width: 100%;
  height: 40px;
  background: white;
  
}
.el-button{
  margin-left:30px;
}
.hide{
  padding: 20px;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin:auto;
  z-index: 100;
  width: 500px;
  height: 500px;
  background: #ccc;
  .head{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: skyblue;
    color:white;
  }
  .bottom{
    width: 100%;
    font-size: 20px;
    .el-input{
      margin-top:10px ;
      margin-bottom:10px ;

    }
  }
}
</style>